---
title: 书法
comments: false
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="leancloud.js"></script>
    <link rel="stylesheet" href="leancloud.css">
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
</head>
<style>
    #grid-container {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
        margin: 20px;
        cursor: pointer;
    }

    .grid-item {
        /* background-color: #{{ random_color }}; */
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        color: white;
        height: 80px;
        /* Increase item height */
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 13px;
    }
    

    #more {
        text-align: right;
        font-size: small;
        margin-top: 10px;
    }
    #containers {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
    }

    .item1 {
      /* 或任何你想要的百分比 */
      margin-bottom: -20px;
      margin-right: 15px;
      
    }

    .item2 {
      flex-grow: 1;
      /* 这将占据剩余的所有空间 */
    }
    #buttonContainer {
      justify-content: center;
      align-items: center;
      display: flex;
    }
    #backButton {
    background-image: url('images/back.png');
    width: 20px;
    height: 20px;
    background-size: cover;
    cursor: pointer;
    }
</style>

<body>

    <div id="containers">
        <div id="backButton" class="item1"></div>
        <div id="search" class="item2">
    
          <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
            <div class="search-input">
              <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..."
                required="">
            </div>
          </form>
        </div>
      </div>

    <!-- 加载动画 -->
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div id="more">
        <a href='https://mdx.lintiebao.cn'>没查到？试试这个</a>
    </div>

    <div id="grid-container">

    </div>

    <div id="buttonContainer">
        <div id="moreButton"></div>
    </div>
</body>
<script>

    localStorage.removeItem('searchZidianKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '书法字典'

    


    // document.getElementById('customModal');
     var postTitle = document.querySelector('.post-title');
     postTitle.style.display = 'none';

     var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

    //  var postFooter = document.querySelector('.post-footer__meta');
    //  postFooter.style.display = 'none';

    function isWeChat() {
        var ua = window.navigator.userAgent.toLowerCase();
        return ua.indexOf('micromessenger') !== -1;
    }
    if (!isWeChat()) {
        alert('请关注公众号“临帖宝”，使用“书法字典”！');
        window.opener = null;
        window.close();
        setTimeout(function () {
            window.history.back();
        }, 100);
    }

    var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    initLeanCloud()
    requestZidianDictCate(currentPage, pageSize, '', handleData)

    function handleData(data) {

    }

    var img = document.getElementById('moreButton');
    img.addEventListener('click', function () {
        currentPage++;
        var keyword = localStorage.getItem('searchZidianKeyword');
        if (keyword == null) {
            keyword = ""
        }
        console.log('keyword:', keyword);
        requestZidianDictCate(currentPage, pageSize, keyword, handleData)
    });
    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function () {
        var inputElement = document.getElementById('search-input');
        inputElement.value = '';
        inputElement.addEventListener('input', function (event) {
            // 实时获取输入框中的内容
            var inputValue = inputElement.value;
        });
        inputElement.addEventListener('keyup', function (event) {
            if (event.key === 'Enter') {
                // 用户按下了回车键，执行相应的操作
                //   console.log('用户按下了回车键');
                var inputValue = inputElement.value;
                //   console.log('搜索内容为：' + inputValue);

                localStorage.setItem('searchZidianKeyword', inputValue);
                var dataContainer = document.getElementById('grid-container');
                // 清空容器
                dataContainer.innerHTML = '';
                currentPage = 1;
                requestZidianDictCate(currentPage, pageSize, inputValue, handleData);
                // 在这里添加你想要执行的操作
            }
        });
    });
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
</script>

</html>